<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>GvaScript Form</title>
  <link rel="stylesheet" type="text/css" href="form.gvascript.css" media="screen" />
  <link href="../../test.css" rel="stylesheet" type="text/css">
  <link href="../../images/GvaScript.css" rel="stylesheet" type="text/css">
  <script src="../../../lib/prototype.js"></script>
  <script src="../../../lib/GvaScript.js"></script>
  <script src="effects.js"></script>
  <script src="validation.js"></script>

  <script type="text/javascript">
    /**
     * Declaring Form Global Responders
     */
  GvaScript.Form.Responders.register({
    onInit: function(gva_form) {
      gva_form.valid = new Validation(gva_form.formElt, {onSubmit:false});
      log('Form <em>[Late]</em> onInit: validation module attached')
    },

    onChange: function(gva_form, event) {
      log('Form <em>[Late]</em> onChange');
      gva_form.formElt.addClassName('form-edited');
      gva_form.formElt.removeClassName('form-error');
      
      setInfoMessage('form updated ... make sure to save.');
    },

    onBeforeSubmit: function(gva_form) {
      log('Form <em>[Late]</em> onBeforeSubmit: hides form message and resets its classnames');
      gva_form.formElt.removeClassName('form-edited');
      gva_form.formElt.removeClassName('form-error');
      hideMessage();
    },

    onAfterSubmit: function(gva_form) {
      log('Form <em>[Late]</em> onAfterSubmit: display success message');
      setInfoMessage('thank you!'); 
    },

    onDataValidationError: function(gva_form, msg) {
      log('Form <em>[Late]</em> onDataValidationError: form submission failed on the client-side. set form-error classname and display error message');
      gva_form.formElt.addClassName('form-error'); 
      gva_form.formElt.removeClassName('form-edited'); 
      setErrorMessage(msg);
    },

    onSubmitFailure: function(gva_form, msg) {
      log('Form <em>[Late]</em> onSubmitFailure: form submission failed on server-side. set form-error classname and display error message');
      gva_form.formElt.addClassName('form-error'); 
      gva_form.formElt.removeClassName('form-edited'); 
      setErrorMessage(msg);
    },

    onBeforeDestroy: function(gva_form) {
      gva_form.valid = null;
      log('Form <em>[Late]</em> onBeforeDestroy : validation module detached');
    }

  });

  GvaScript.Form.EarlyResponders.register({
    onBeforeSubmit: function(gva_form) {
      log('Form <em>[Early]</em> onBeforeSubmit: checks for form changes then runs fields validation');

      if(!gva_form.formElt.hasClassName('form-edited')) {
        alert('nothing change - skip trip to server');
        return false;
      }
      else {
        if (gva_form.valid.validate()) return true;
        else {
          gva_form.fire('DataValidationError', 'Some fields failed to validate!');
          return false;
        }
      }
    }
  });
  </script>
</head>

<body>
  [<a href="#" onclick="$('logs').update()">Clear</a>]
  <div id="logs"></div>
  <div class="message" id="app_message"></div>


  <form id="my_book" onsubmit="return false;">

    <h2>Book</h2>
    
    <div class="header">
      <h3>Data</h3>

      <div>
        <label>Title <sup>*</sup></label>
        <input type="text" name="book.TITLE" class="required" autofocus/>
      </div>
      <div>
        <label>Description <sup>*</sup></label>
        <textarea name="book.DESCRIPTION" class="required" minLength="10"></textarea>
      </div>

    </div>

    <div class="authors">
      <h3>Authors 
        <span class="icon-add" onclick="GvaScript.Form.add('book.authors')"></span>
      </h3>

      <div repeat="authors" repeat-prefix="book" 
           onAdd="" 
           onRemove="">

        <div class="author">
          <span class="icon-delete" onclick="GvaScript.Form.remove('#{authors.path}')"></span>
          <span class="counter">#{authors.count}</span> 
          <div>
            <label>Author name <sup>*</sup></label>
            <input type="text" name="#{authors.path}.NAME" class="required" autofocus />
          </div>
          <div>
            <label>Author email</label>
            <input type="text" name="#{authors.path}.EMAIL" class="validate-email" />
          </div>
          <div>
            <label>Author remarks</label>
            <textarea name="#{authors.path}.REMARKS"></textarea>
          </div>
        </div>

      </div>

    </div>
    <div style="clear:both"></div>
    <div id="actionsbar"></div>
  </form>

  <br/><br/>
  <em>This example uses 
  <a href="http://tetlaw.id.au/view/javascript/really-easy-field-validation" target="_blank">'really easy field validation'</a> 
  module by Andrew Tetlaw (Dexagogo) to perform client-side form fields validation.</em>

</body>

<script type="text/javascript">
var book_data = {
  TITLE: 'The Bible',
  DESCRIPTION: 'A book about Jesus, God and everything.\n\nBest-seller!',

  authors: [
    {
      NAME: 'Jesus Christ', 
      EMAIL: 'jesus@holy.org',
      REMARKS: 'Savior of mankind, died for your sins.'
    },
    {
      NAME: 'Moses ', 
      REMARKS: 'Can write stuff in stone. Will split the sea when necessary.'
    }
  ]
}

var my_form_obj = new GvaScript.Form('my_book', {
  datatree: book_data,
  dataprefix: 'book',

  actionsbar : {
      container :  'actionsbar',
      actions   : [
          {
              label : 'Submit Form',
              type  : 'submit'
          },
          {
              label : 'to_hash',
              type  : 'button',
              callback : function() {
                log(Object.toJSON(my_form_obj.to_hash()))
              }
          },
          {
              label : 'to_tree',
              type  : 'button',
              callback : function() {
                log(Object.toJSON(my_form_obj.to_tree()))
              }
          },
          {
              label : 'destroy',
              type  : 'button',
              callback : function() {
                GvaScript.Forms.get('my_book').destroy();
                $('my_book').remove();
              }
          }
      ]
  },

  registry: [
    ['input,textarea', 'change', function(event, newvalue, oldvalue) {log(event.target.name + ' changed value ['+oldvalue+'] -> ['+newvalue+']')}],
    ['input,textarea', 'init', function(event, newvalue) {log(event.target.name + ' initialized value -> ['+newvalue+']')}],
    ['input,textarea', 'mouseover', function(event) {event.target.addClassName('hover')}],
    ['input,textarea', 'mouseout', function(event) {event.target.removeClassName('hover')}],
    ['input,textarea', 'focus', function(event) {event.target.addClassName('focus')}],
    ['input,textarea', 'blur',  function(event) {event.target.removeClassName('focus')}]
  ],

  onBeforeSubmit: function() {
    log('Form <em>[instance]</em> onBeforeSubmit: asks for confirmation');
    return confirm('ready to save book?');
  },

  onSubmit: function(gva_form) {
    log('Form <em>[instance]</em> onSubmit: submits form and handels server-side failures');
    var tree = gva_form.to_tree();

    (function() {                
      if(!tree.book.authors)
      gva_form.fire('SubmitFailure', 'at least one author is required!');
      else 
      gva_form.fire('AfterSubmit');
      }).delay(1);

    return true;
  }
});


function log(msg) {
  $('logs').innerHTML += "<div class='msg'> >> "+msg+" </div>" ;
  $('logs').scrollTop  = 99999; 
}
function setInfoMessage(msg) {
  $('app_message').update(msg);
  $('app_message').addClassName('message-info');
  $('app_message').removeClassName('message-error');
  $('app_message').show();
}
function setErrorMessage(msg) {
  $('app_message').update(msg);
  $('app_message').addClassName('message-error');
  $('app_message').removeClassName('message-info');
  $('app_message').show();
}
function hideMessage() {
  $('app_message').hide();
}
</script>

</html>
